<script setup>
import {ref, defineEmits, defineProps} from 'vue'
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'
import OneImage from '@/components/common/OneImage.vue'
import InchesInput from '@/components/common/InchesInput.vue'

const stepTitleAndDescription = ref({
  "title": 'Step 5',
  'description': 'What\'s the height from window top to floor?'
})

const emit = defineEmits(['inches'])

const submit = (inches) => {
  emit('submit', inches)
}

const OneImageData = ref({
  "src": 'https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_B4-2.svg?v=1745722155',
  "alt": 'step 5'
})

</script>

<template>

  <div class="content-container">
    <StepTitleDescription :title-and-description="stepTitleAndDescription" />
    <OneImage :OneImage="OneImageData"/>
    <InchesInput @submit="submit"/>
  </div>

</template>

<style scoped>

.content-container {
  display:flex;
  flex-direction: column;
  align-items: center;
}

</style>